import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Cookies from 'js-cookie';
import { fallback_route, not_found } from './not-found';
import { adminRoute } from './admin';
import store from '@/store';
import { SET_USER_INFO } from '@/store/actiontype';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Index',
    component: () =>
      import(/* webpackChunkName: "index" */ '@/views/frontdesk/index.vue'),
    redirect: '/home',
    meta: {
      auth: false,
      title: '首页',
    },

    children: [
      {
        path: '/home',
        name: 'Home',
        component: () =>
          import(
            /* webpackChunkName: "Home" */ '@/views/frontdesk/home/index.vue'
          ),
        meta: {
          auth: false,
          title: '首页',
          keepAlive: true,
          isBack: false,
        },
      },
      {
        path: 'categories',
        name: 'Categories',
        component: () =>
          import(
            /* webpackChunkName: "categories" */ '@/views/frontdesk/categories/index.vue'
          ),
        meta: {
          auth: false,
          title: '所有分类',
        },
      },
      {
        path: 'category/:name',
        name: 'Category',
        component: () =>
          import(
            /* webpackChunkName: "category" */ '../views/frontdesk/category/index.vue'
          ),
        meta: {
          auth: false,
          title: '分类',
        },
      },
      {
        path: 'tags',
        name: 'Tags',
        component: () =>
          import(
            /* webpackChunkName: "tags" */ '@/views/frontdesk/tags/index.vue'
          ),
        meta: {
          auth: false,
          title: '所有标签',
        },
      },
      {
        path: 'tag/:name',
        name: 'Tag',
        component: () =>
          import(
            /* webpackChunkName: "tag" */ '@/views/frontdesk/tag/index.vue'
          ),
        meta: {
          auth: false,
          title: '标签',
        },
      },
      {
        path: 'messages',
        name: 'Messages',
        component: () =>
          import(
            /* webpackChunkName: "messages" */ '../views/frontdesk/messages/index.vue'
          ),
        meta: {
          auth: false,
          title: '留言',
        },
      },
      {
        path: 'chat',
        name: 'Chat',
        component: () =>
          import(
            /* webpackChunkName: "chat" */ '../views/frontdesk/chat/index.vue'
          ),
        meta: {
          auth: false,
          title: '在线聊天',
        },
      },
      {
        path: 'timeline',
        name: 'Timeline',
        component: () =>
          import(
            /* webpackChunkName: "timeline" */ '../views/frontdesk/timeline/index.vue'
          ),
        meta: {
          auth: false,
          title: '时间轴',
        },
      },
      {
        path: 'article/:id',
        name: 'Article',
        component: () =>
          import(
            /* webpackChunkName: "article" */ '@/views/frontdesk/article/index.vue'
          ),
        meta: {
          auth: false,
          title: '文章详情',
        },
      },
      {
        path: 'login',
        name: 'Login',
        component: () =>
          import(
            /* webpackChunkName: "login" */ '@/views/frontdesk/login/index.vue'
          ),
        meta: {
          auth: false,
          title: '登录界面',
        },
      },
      not_found,
    ],
  },
  adminRoute,
  // not_found,
  fallback_route,
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  // 管理滚动条行为
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { top: 0 };
    }
  },
});

// 使用vuex来做属性
const clearUserInfo = () => {
  store.commit(SET_USER_INFO, null);
};

// 路由守卫
router.beforeEach((to, from, next) => {
  // 基本校验
  if (to.meta.auth) {
    // 需要鉴权的页面，进行前端检查，主要检查cookie中有没有标志位islogined
    // 后端依旧需要对需要鉴权的接口访问做校验，不能依赖前端的判定
    const isLogined = Cookies.get('islogined');
    if (isLogined === '1') {
      next();
    } else {
      clearUserInfo();
      next('/login');
    }
  } else {
    next();
  }
});
export default router;
